@using viBook.Models
@model Chapter
@{
    ViewBag.Title = "View Book Detail";
}
<link href="../../Content/Custom.css" rel="stylesheet" type="text/css" />
<link href="../../Content/Tag.css" rel="stylesheet" type="text/css" />
<div class="container">
    <div class="span-15" id="book-wrapper">
        <div id="screenshot-title-section" class="full title span-24">
            <div class="single-title vcard group">
                <a href="/bpotstra" class="url" rel="contact" title="Brian Potstra">
                    <img alt="Bp" class="photo fn" src="http://dribbble.s3.amazonaws.com/users/770/avatars/original/bp.jpg?1305129390">
                </a>
                <h1 id="screenshot-title">@Model.ChapterName</h1>
                <div class="shot-byline">
                    <span class="shot-byline-user">by <a href="/bpotstra" class="url" rel="contact">Brian
                        Potstra</a> </span>
                    <div class="follow-prompt">
                        <form action="/bpotstra/followers/NhimConLonTon" method="post">
                        <div style="margin: 0; padding: 0; display: inline">
                            <input name="_method" type="hidden" value="delete">
                            <input name="authenticity_token" type="hidden" value="BEjADsUgu+M8oFw04wCyTSgZDOw3LHFk1iEgzFW5tGI=">
                        </div>
                        <a href="#" class="action following" title="You are following Brian Potstra. Click to unfollow.">
                            <span>Following</span> </a>
                        </form>
                    </div>
                    <span class="screenshot-dash"><span class="sep">|</span> June 23, 2011 </span>
                    <div class="screenshot-dash">
                    </div>
                </div>
            </div>
        </div>
        <br />
        <div data-bind="template:{name:'ChapterTemplate',foreach:pictureCollection}">
        </div>
    </div>
    <div class="slide span-8 last" id="sidebar-holder">
        <img id="button-toggle" class="btn-slide" data-bind="click: toggleSidebar" src="../../Content/tab-expanded.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </img>
        <div id="sideBar" style="border: 2px">
            <div class="profile-actions profile-actions-shots">
                <ul class="profile-tabs group">
                    <li>@Model.NumberOfViews <span class="meta">views</span> </li>
                    <li><a href="#"><span data-bind="text: numberOfLikes"></span><span class="meta">likes</span>
                    </a></li>
                    <li><a href="#comments-section"><span data-bind="text:numberOfComments"></span><span
                        class="meta">responses</span> </a></li>
                </ul>
            </div>
            <div id="screenshot-meta">
                <div id="like-section" class="meta-act logged-in">
                    <div class="group fav">
                        <strong class="fav-number"><a href="#" data-bind="click: likeChapter"><span data-bind="text: numberOfLikes()+' likes'" />
                        </a></strong><a href="#" class="meta-act-link meta-like fav-toggle" id="fav-link-198327"
                            title="Like this screenshot?"><span>Like</span> </a>
                    </div>
                </div>
                <div class="meta-act">
                    <div class="meta-act-link meta-share">
                        <form id="share-form">
                        <fieldset>
                            <input type="text" id="share-form-url" name="share-form-url" class="form-text" value="Share"
                                readonly="readonly">
                        </fieldset>
                        </form>
                    </div>
                </div>
                <div class="meta-act">
                    <div class="meta-act-link meta-share">
                        <p>
                            Display mode:
                            <select data-bind="
                    options: availableTagModes,
                    optionsText:function(item) { 
                       return item.desc;
                    },
                   value: selectedTagMode">
                            </select></p>
                    </div>
                </div>
                <h3 class="meta-head">
                    Tags</h3>
                <ol id="tag-section" class="tags group" data-bind="template:{name:'ContentTagTemplate' ,foreach: contentTagCollection}"/>
                <ul class="admin">
                    <li id="flag-section" class="flag"><a href="#" class="flag" id="flag-link-198327"
                        title="Flag this screenshot as inappropriate">Flag as inappropriate</a> </li>
                </ul>
            </div>
            <div id="comment-section" data-bind="template: {name:'CommentTemplate'}">
            </div>
        </div>
    </div>
</div>
@Html.Partial("_ChapterTemplate")
@Html.Partial("_CommentTemplate")
@Html.Partial("DetailsJS")
